<template>
	<view class="page" :style="{ 'min-height': h + 'px' }">
		<c-nav-bar title="船票+" bgColor="transparent" :showHome="false" leftIconColor="#ffffff"
			:titleStyle="titleStyle"></c-nav-bar>
		<swiper class="swiper" :circular="true" :autoplay="true" :interval="5000" :duration="200"
			style="height: 520rpx;">
			<swiper-item class="swiper-items" v-for="item, index in lbList" :key="index" @tap="toLbDetails(item.route)">
				<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<view class="tabs">
				<view class="ct_left" :class="tidx == 0 ? 'active' : ''" @tap="changeTab(0)">
					<text>船票+住宿</text>
					<image src="https://i.ringzle.com/file/20240409/7151faa6e1d94ed88b5829bbab52524f.png" class="ta_bg"
						v-show="tidx == 0"></image>
					<image src="https://i.ringzle.com/file/20240409/66a7ed12b15245f68bbb7ce8cdaba331.png"
						class="ta_bottom" v-show="tidx == 0"></image>
				</view>
				<view class="ct_right" :class="tidx == 1 ? 'active' : ''" @tap="changeTab(1)">
					<text>船票+景点</text>
					<image src="https://i.ringzle.com/file/20240409/3886704ff32a4751b2f7e3805f99aa74.png" class="ta_bg"
						v-show="tidx == 1"></image>
					<image src="https://i.ringzle.com/file/20240409/66a7ed12b15245f68bbb7ce8cdaba331.png"
						class="ta_bottom" v-show="tidx == 1"></image>
				</view>
			</view>
			<view class="lists" v-if="tidx == 0">
				<block v-if="hotelList.length > 0">
					<view v-for="(item, index) in hotelList" @click="goHotelInfo(item)" :key="item.id" class="citem"
						:class="index == 0 ? 'citem_first' : ''">
						<view class="card">
							<view class="card_pic">
								<image :src="item.cover" mode="aspectFill"></image>
							</view>
							<view class="card_text">
								<!-- 票名 -->
								<view class="goodsName">
									<text class="nameGoods">{{ item.jointName }}</text>
								</view>
								<!-- 小标签 -->
								<view class="titleFlag">
									<text class="flagText" v-for="(ele, index) in item.featureLabelList"
										:key="index">{{ ele }}</text>
								</view>
								<!-- 已售 -->
								<view class="alreadySale" v-if="item.saleNum">
									<text>已售{{ item.saleNum }}</text>
								</view>
								<!-- 价格&预定 -->
								<view class="price">
									<view class="price_left">
										<text class="rmb">￥</text>
										<text class="now_price">{{ item.bottomPrice }}</text>
										<text class="bottom_price">起</text>
										<!-- <text class="before_price">￥1280</text> -->
									</view>
									<view class="price_right">
										<text class="before_buy">预订</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
			<view class="lists" v-else>
				<block v-if="landscapeList.length > 0">
					<view v-for="(item, index) in landscapeList" :key="item.id" class="citem"
						:class="index == 0 ? 'citem_first' : ''"
						@click.native="toHref('/pagesTrip/packageArea/detail?scenicLabelList=' + item.scenicLabelList + '&id=' + item.id + '&jointName=' + item.jointName + '&jointPrice=' + item.bottomPrice + '&startPrice=' + item.startPrice)">
						<view class="card">
							<view class="card_pic">
								<image :src="item.coverImage" mode="aspectFill"></image>
							</view>
							<view class="card_text">
								<!-- 票名 -->
								<view class="goodsName">
									<text class="nameGoods">{{ item.jointName }}</text>
								</view>
								<!-- 小标签 -->
								<view class="titleFlag">
									<text class="flagText" v-for="(ele, index) in item.scenicLabelList"
										:key="index">{{ ele }}</text>
								</view>
								<!-- 已售 -->
								<view class="alreadySale" v-if="item.saleNum">
									<text>已售{{ item.saleNum }}</text>
								</view>
								<!-- 价格&预定 -->
								<view class="price">
									<view class="price_left">
										<text class="rmb">￥</text>
										<!-- <text class="now_price">{{item.bottomPrice}}</text> -->
										<text class="now_price">{{ item.startPrice }}</text>
										<text class="bottom_price">起</text>
										<!-- <text class="before_price">￥1280</text> -->
									</view>
									<view class="price_right">
										<text class="before_buy">预订</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
		</view>
		<view class="fixedTop hotel" v-show="isHotelHead" :style="{ 'padding-top': mt + 'px' }">
			<c-nav-bar title="船票+住宿" :showHome="false"></c-nav-bar>
			<ShipHotel @toSearch="shipHotelSearch" @toSort="hotelListSort" ref="rShipHotel" />
		</view>
		<view class="fixedTop scene" v-show="isSceneHead" :style="{ 'padding-top': mt + 'px' }">
			<c-nav-bar title="船票+景点" :showHome="false"></c-nav-bar>
			<ShipScene @toSearchScene="shipSceneSearch" @toSort="sceneListSort" ref="rShipScene" />
		</view>
	</view>
</template>

<script>
	import ShipHotel from '@/compoments/shipMore/shipHotel.vue';
	import ShipScene from '@/compoments/shipMore/shipScene.vue';
	export default {
		components: {
			ShipHotel,
			ShipScene
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: '#FFFFFF'
				},
				lbList: [
					{path:'https://fsy.shengsi.gov.cn/file/20240730/6c3c43bec0a44b90ad044e3916bf8bab.png',route:''}
				],
				tidx: 0,
				hotelList: [],
				landscapeList: [],
				FormData: {
					name: '',
					endPortNo: '',
					startPortNo: '',
					arriveDate: '', //	到达时间(yyyy-MM-dd)
					leaveDate: '', //离开时间(yyyy-MM-dd)
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					priceSort: '' //价格排序: 1由高到低, 0由低到高
				},
				isOver: false,
				isHotelHead: false,
				isSceneHead: false,
				sceneParams: {
					page: 1,
					limit: 10,
					scenicName: '',
					startPrice: '',
					endPrice: ''
				}
			}
		},
		onLoad(options) {
			this.getLbList();
			if (options.turnType) this.tidx = +options.turnType;
			this.FormData.arriveDate = new Date().Format('yyyy-MM-dd');
			this.FormData.leaveDate = new Date(new Date().setDate(new Date().getDate() + 1)).Format('yyyy-MM-dd');
			this.getData();
			this.getSecneData();
		},
		onReachBottom() {
			if (this.isOver) return;
			if (this.tidx == 0) this.getData();
			else this.getSecneData();
		},
		onPageScroll(e) {
			if (e.scrollTop >= 210) {
				if (this.tidx == 0) this.isHotelHead = true;
				else this.isSceneHead = true
			} else {
				this.isHotelHead = false;
				this.isSceneHead = false;
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.FormData = {
					name: '',
					endPortNo: '',
					startPortNo: '',
					arriveDate: '',
					leaveDate: '',
					limit: 10,
					page: 1,
					priceSort: ''
				}
				this.sceneParams = {
					page: 1,
					limit: 10,
					scenicName: '',
					startPrice: '',
					endPrice: ''
				}
				this.$refs.rShipHotel.reset();
				this.$refs.rShipScene.initReset();
				this.init();
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			toLbDetails(url) {
				if (!url) return
				uni.navigateTo({ url })
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/1').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>{
							return {path:b.path,route:b.linkUri}
						})
						if (list.length > 0) this.lbList = list;
					}
				})
			},
			changeTab(idx) {
				if (this.tidx == idx) return;
				this.tidx = idx;
				this.FormData = {
					name: '',
					endPortNo: '',
					startPortNo: '',
					arriveDate: '',
					leaveDate: '',
					limit: 10,
					page: 1,
					priceSort: ''
				}
				this.sceneParams = {
					page: 1,
					limit: 10,
					scenicName: '',
					startPrice: '',
					endPrice: ''
				}
				this.init();
			},
			init() {
				this.hotelList = [];
				this.landscapeList = [];
				this.isOver = false;
				if (this.tidx == 0) this.getData();
				else this.getSecneData();
			},
			// 船+宿列表
			getData() {
				this.$api.get('/api/shipHotel/getShipHotelJointList', this.FormData).then(res => {
					if (res.data.code === 0) {
						this.FormData.page++;
						let {
							list,
							total
						} = res.data.data;
						if (this.hotelList.length + list.length > total || list.length == 0) return this.isOver =
							true;
						this.hotelList = [...this.hotelList, ...list];
						this.hotelList.forEach((r, i) => this.$set(this.hotelList[i], 'current', 0));
					} else this.$showModal(res.data.msg)
				})
			},
			// 去船+宿详情
			goHotelInfo(item) {
				wx.setStorageSync('detailsList', item);
				uni.navigateTo({
					url: "/pagesIndex/orderDetails/orderDetails?list=" + JSON.stringify({
						jointName2: item.jointName,
						bottomPrice: item.bottomPrice,
						id: item.id,
						...this.FormData,
						...item
					})
				})
			},
			// 船+景列表
			getSecneData() {
				this.$api.get("/api/shipScenic/getShipScenicJointList", this.sceneParams).then((res) => {
					if (res.data.code === 0) {
						this.sceneParams.page++;
						let {
							list,
							total
						} = res.data.data;
						if (this.landscapeList.length + list.length > total || list.length == 0) return this
							.isOver = true;
						this.landscapeList = [...this.landscapeList, ...list];
					} else this.$showModal(res.data.msg);
				});
			},
			// 去船+景详情
			toHref(url) {
				uni.navigateTo({
					url
				});
			},
			shipHotelSearch(params) {
				this.FormData = {
					...this.FormData,
					...params
				};
				this.$refs.rShipHotel.reset();
				this.init();
			},
			hotelListSort(type) {
				this.hotelList.sort(function(a, b) {
					if (!type) { //降序
						return parseFloat(b.saleNum) - parseFloat(a.saleNum);
					} else {
						return parseFloat(a.saleNum) - parseFloat(b.saleNum); //	升序
					}
				});
			},
			shipSceneSearch(params) {
				this.sceneParams.page = 1;
				this.sceneParams = {
					...this.sceneParams,
					...params
				};
				this.init();
				this.$refs.rShipScene.initReset();
			},
			sceneListSort(type) {
				this.landscapeList.sort(function(a, b) {
					if (!type) { //降序
						return parseFloat(b.saleNum) - parseFloat(a.saleNum);
					} else {
						return parseFloat(a.saleNum) - parseFloat(b.saleNum); //	升序
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		position: relative;

		.bg {
			width: 100%;
			height: 480rpx;
			position: relative;
		}

		.content {
			width: calc(100% - 48rpx);
			margin: 0 24rpx;
			position: relative;
			margin-top: -90rpx;

			.tabs {
				width: 100%;
				height: 90rpx;
				display: flex;
				background-color: rgba(255, 255, 255, .88);
				border-radius: 24rpx 24rpx 0 0;

				&>view {
					width: 50%;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #111111;
						line-height: 45rpx;
						position: relative;
						z-index: 2;
					}

					&.active {
						.ta_bg {
							width: calc(100% + 41rpx);
							height: calc(100% + 8rpx);
							position: absolute;
							bottom: 0;
							z-index: 1;
						}

						.ta_bottom {
							width: 54rpx;
							height: 10rpx;
							position: absolute;
							z-index: 2;
							left: 50%;
							margin-left: -27rpx;
							bottom: 4rpx;
						}
					}

					&.ct_left {
						.ta_bg {
							left: 0;
						}
					}

					&.ct_right {
						.ta_bg {
							right: 0;
						}
					}
				}
			}

			.lists {
				width: 100%;
				background: #fff;
				padding: 20rpx 0 40rpx;
				box-sizing: border-box;
				border-radius: 0 0 24rpx 24rpx;

				.citem {
					width: 100%;
					padding-right: 24rpx;
					box-sizing: border-box;
					margin-top: 40rpx;

					&.citem_first {
						margin-top: 0;
					}

					.card {
						display: flex;
						justify-content: space-between;
					}

					.card_pic {
						width: 200rpx;
						height: 240rpx;
						// background-color: teal;

						image {
							border-radius: 10rpx;
							width: 200rpx;
							height: 240rpx;
						}
					}

					.card_text {
						margin-left: 24rpx;
						// margin-right: 30rpx;
					}

					.goodsName {
						width: 466rpx;
						height: 80rpx;
					}

					.nameGoods {
						// margin-right: 30rpx;
						font-size: 30rpx;
						font-weight: 700;
					}

					.titleFlag {
						// width: auto;
						margin-top: 10rpx;
						// border: 1rpx solid #EFEFEF;
						// display: block;
						display: flex;
					}

					.flagText {
						font-size: 22rpx;
						border: 1rpx solid #DCC7AB;
						border-radius: 4rpx;
						padding: 5rpx;
						margin-right: 15rpx;
						color: #C9A771;
					}

					.alreadySale {
						margin-top: 15rpx;

						text {
							color: #999990;
						}
					}

					.price {
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;
					}

					.rmb {
						font-size: 24rpx;
						color: #FF3E3E;
					}

					.now_price {
						font-size: 40rpx;
						color: #FF3E3E;
						font-weight: 700;
					}

					.bottom_price {
						font-size: 24rpx;
						color: #FF3E3E;
					}

					.before_price {
						font-size: 20rpx;
						color: #999990;
						text-decoration: line-through;
					}

					.price_right {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 120rpx;
						height: 56rpx;
						border-radius: 28rpx;
						background-color: #007A69;
						// background-image: url('https://i.ringzle.com/file/20240118/4dc6084eff47421db5ec91e635d50268.png');
						background-size: contain;
						background-repeat: no-repeat;
						// margin-bottom: 5rpx;
					}

					.before_buy {
						color: #fff;
						font-size: 24rpx;
					}

					.line {
						width: 690rpx;
						height: 1rpx;
						background-color: #efefef;
						margin-left: 30rpx;
						margin-top: 30rpx;
					}
				}
			}
		}

		.fixedTop {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			border-bottom: 10rpx solid #F5F8FA;

			.title {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
					line-height: 50rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			&.hotel {}
		}
	}
</style>